<template>
  <div class="analytics-page">
    <!-- 概览统计 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32"><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">+12.5%</div>
              <div class="stat-label">本月增长</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32"><View /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">8,456</div>
              <div class="stat-label">本月播放</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32"><Upload /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">156</div>
              <div class="stat-label">本月上传</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32"><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">2,340</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card title="播放量趋势">
          <template #header>
            <div class="card-header">
              <span>播放量趋势</span>
              <el-radio-group v-model="trendPeriod" size="small">
                <el-radio-button label="7d">7天</el-radio-button>
                <el-radio-button label="30d">30天</el-radio-button>
                <el-radio-button label="90d">90天</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-icon size="64" color="#ddd"><TrendCharts /></el-icon>
            <p>播放量趋势图表</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>分类分布</span>
          </template>
          <div class="chart-placeholder">
            <el-icon size="64" color="#ddd"><PieChart /></el-icon>
            <p>分类分布饼图</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门内容 -->
    <el-row :gutter="24" style="margin-top: 24px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>热门视频</span>
          </template>
          <div class="popular-list">
            <div
              v-for="(item, index) in popularVideos"
              :key="item.id"
              class="popular-item"
            >
              <div class="rank">{{ index + 1 }}</div>
              <div class="item-info">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-meta">{{ item.views }} 次播放</div>
              </div>
              <div class="item-trend">
                <el-icon color="#67c23a"><CaretTop /></el-icon>
                <span>+{{ item.growth }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>上传统计</span>
          </template>
          <div class="upload-stats">
            <div class="stat-item">
              <div class="stat-label">今日上传</div>
              <div class="stat-value">12</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">本周上传</div>
              <div class="stat-value">89</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">本月上传</div>
              <div class="stat-value">356</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">总计上传</div>
              <div class="stat-value">2,456</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card style="margin-top: 24px;">
      <template #header>
        <div class="card-header">
          <span>详细数据</span>
          <el-button type="primary" size="small">
            <el-icon><Download /></el-icon>
            导出报告
          </el-button>
        </div>
      </template>
      
      <el-table :data="detailData" style="width: 100%">
        <el-table-column prop="name" label="文件名" min-width="200" />
        <el-table-column prop="category" label="分类" width="100" />
        <el-table-column prop="views" label="播放量" width="100" />
        <el-table-column prop="likes" label="点赞数" width="100" />
        <el-table-column prop="uploadTime" label="上传时间" width="160" />
        <el-table-column prop="growth" label="增长率" width="100">
          <template #default="{ row }">
            <span :class="row.growth > 0 ? 'growth-positive' : 'growth-negative'">
              {{ row.growth > 0 ? '+' : '' }}{{ row.growth }}%
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const trendPeriod = ref('30d')

// 热门视频数据
const popularVideos = ref([
  { id: '1', name: '精彩电影预告片.mp4', views: 3250, growth: 15.2 },
  { id: '2', name: 'Vue3教学视频.mp4', views: 2890, growth: 8.7 },
  { id: '3', name: '音乐MV合集.mp4', views: 2456, growth: 12.3 },
  { id: '4', name: '新闻报道.mp4', views: 1980, growth: 5.6 },
  { id: '5', name: '纯音乐集锦.mp3', views: 1750, growth: 3.2 }
])

// 详细数据
const detailData = ref([
  {
    name: '精彩电影预告片.mp4',
    category: '电影',
    views: 3250,
    likes: 245,
    uploadTime: '2024-01-15',
    growth: 15.2
  },
  {
    name: 'Vue3教学视频.mp4',
    category: '教育',
    views: 2890,
    likes: 189,
    uploadTime: '2024-01-14',
    growth: 8.7
  },
  {
    name: '音乐MV合集.mp4',
    category: '音乐',
    views: 2456,
    likes: 156,
    uploadTime: '2024-01-13',
    growth: 12.3
  }
])
</script>

<style scoped>
.analytics-page {
  padding: 0;
}

.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.popular-list {
  padding: 0;
}

.popular-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.popular-item:last-child {
  border-bottom: none;
}

.rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 12px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.item-meta {
  font-size: 12px;
  color: #666;
}

.item-trend {
  display: flex;
  align-items: center;
  color: #67c23a;
  font-size: 12px;
}

.upload-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-item .stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-item .stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.growth-positive {
  color: #67c23a;
}

.growth-negative {
  color: #f56c6c;
}
</style> 